<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/aplayer/1.9.1/APlayer.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/aplayer/1.9.1/APlayer.min.js"></script>
    <style>
        .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
            background: #000;
        }

        #loading {
            position: fixed;
            width: 70px;
            top: 52px;
            right: 61px;
            background: #fff;
            font-size: 12px;
            color: #999;
        }
    </style>
</head>
<body>
<div id="aplayer"></div>
<span id="loading">加载中...</span>
<script>
    const player = new APlayer({
        container: document.getElementById('aplayer'),
        audio: {
            name: '我要你',
            artist: '汪苏泷',
            url: 'https://dizuncainiao.gitee.io/blog/statics/iwantyou.mp3',
            cover: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2635163239,2267079179&fm=26&gp=0.jpg'
        }
    });
    player.on('canplaythrough', () => {
        document.getElementById('loading').style.display = 'none'
        console.log('canplaythrough')
    })
    player.on('error', () => {
        document.getElementById('loading').innerText = '加载失败'
        console.log('error')
    })
</script>
</body>
</html>
